<template>
  <div class="app-margins">
    <el-row :gutter="10" class="mb8">
      <el-col :span="3.5">
        <div class="sp-commodity">Inventory</div>
      </el-col>
      <el-col :span="3">
        <div>
          <el-cascader :options="platFormOptions" :show-all-levels="false" @change="handleNodeClick"
            style="margin-top: 8px"></el-cascader>
        </div>
      </el-col>
    </el-row>

    <div class="Card-module_card__zeE7r Card-module_medium__quHDO flex flex-row">
      <div class="flex-1 flex flex-col pr-16 pr-16">
        <div class="flex items-center gap-4">
          <p class="Body-module_body__eiCkB Body-module_body1__B5yP7 Body-module_weight400__4Oy12 text-12">
            <font style="vertical-align: inherit">
              <font style="vertical-align: inherit">库存销售</font>
            </font>
          </p>
          <span class="StatefullPopover-module_popoverContainer__jjevh">
            <el-tooltip content="可售库存除近30天日均销量" effect="dark" placement="top">
              <svg-icon icon-class="question"></svg-icon>
            </el-tooltip>
          </span>
        </div>
        <div>
          <div class="flex items-center">
            <p class="Body-module_body__eiCkB Body-module_body3__KFtX3 Body-module_weight700__crYTs text-24 leading-9"
              variant="3" weight="700" data-testid="current-sales">
              <font style="font-weight: bold"></font>
            </p>
          </div>
        </div>
        <span class="vertical-line1"></span>
      </div>
      <div class="flex-1 flex flex-col pr-16 px-16 border-l border-gray-20">
        <div class="flex items-center gap-4">
          <p class="Body-module_body__eiCkB Body-module_body1__B5yP7 Body-module_weight400__4Oy12 text-12">
            <font style="vertical-align: inherit">
              <font style="vertical-align: inherit">库存销售率</font>
            </font>
          </p>
          <span class="StatefullPopover-module_popoverContainer__jjevh">
            <el-tooltip content="可售库存除近30天日均销量" effect="dark" placement="top">
              <svg-icon icon-class="question"></svg-icon>
            </el-tooltip>
          </span>
        </div>
        <div>
          <div class="flex items-center">
            <p class="Body-module_body__eiCkB Body-module_body3__KFtX3 Body-module_weight700__crYTs text-24 leading-9"
              variant="3" weight="700" data-testid="sales-capability">
              <font style="font-weight: bold"></font>
            </p>
          </div>
        </div>
        <span class="vertical-line2"></span>
      </div>
      <div class="flex-1 flex flex-col pr-16 px-16 border-l border-gray-20">
        <div class="flex items-center gap-4">
          <p class="Body-module_body__eiCkB Body-module_body1__B5yP7 Body-module_weight400__4Oy12 text-12">
            <font style="vertical-align: inherit">
              <font style="vertical-align: inherit">潜在销售总额</font>
            </font>
          </p>
          <span class="StatefullPopover-module_popoverContainer__jjevh">
            <el-tooltip content="可售库存除近30天日均销量" effect="dark" placement="top">
              <svg-icon icon-class="question"></svg-icon>
            </el-tooltip>
          </span>
        </div>
        <div>
          <div class="flex items-center">
            <p class="Body-module_body__eiCkB Body-module_body3__KFtX3 Body-module_weight700__crYTs text-24 leading-9"
              variant="3" weight="700" data-testid="potential-sales">
              <font style="font-weight: bold"></font>
            </p>
          </div>
        </div>
        <span class="vertical-line3"></span>
      </div>
      <div class="flex-1 flex flex-col pr-16 px-16 border-l border-gray-20">
        <div class="flex items-center gap-4">
          <p class="Body-module_body__eiCkB Body-module_body1__B5yP7 Body-module_weight400__4Oy12 text-12">
            <font style="vertical-align: inherit">
              <font style="vertical-align: inherit">销售损失</font>
            </font>
          </p>
          <span class="StatefullPopover-module_popoverContainer__jjevh">
            <el-tooltip content="可售库存除近30天日均销量" effect="dark" placement="top">
              <svg-icon icon-class="question"></svg-icon>
            </el-tooltip>
          </span>
        </div>
        <div>
          <div class="flex items-center">
            <p class="Body-module_body__eiCkB Body-module_body3__KFtX3 Body-module_weight700__crYTs text-24 leading-9"
              variant="3" weight="700" data-testid="avg-gmv">
              <font style="font-weight: bold"></font>
            </p>
          </div>
        </div>
        <span class="vertical-line4"></span>
      </div>
      <div class="flex-1 flex flex-col pr-16 px-16 border-l border-gray-20">
        <div class="flex items-center gap-4">
          <p class="Body-module_body__eiCkB Body-module_body1__B5yP7 Body-module_weight400__4Oy12 text-12">
            <font style="vertical-align: inherit">
              <font style="vertical-align: inherit">有风险的销售</font>
            </font>
          </p>
          <span class="StatefullPopover-module_popoverContainer__jjevh">
            <el-tooltip content="可售库存除近30天日均销量" effect="dark" placement="top">
              <svg-icon icon-class="question"></svg-icon>
            </el-tooltip>
          </span>
        </div>
        <div>
          <div class="flex items-center">
            <p class="Body-module_body__eiCkB Body-module_body3__KFtX3 Body-module_weight700__crYTs text-24 leading-9"
              variant="3" weight="700" data-testid="avg-gmv-two-weeks">
              <font style="font-weight: bold"></font>
            </p>
          </div>
        </div>
      </div>
    </div>
    <br />
    <br />
    <div class="Card-module_card__zeE7r Card-module_medium__quHDO p-0 pt-16 overflow-hidden flex flex-col gap-16">
      <div>
        <el-input placeholder="Search" v-model="input" @keyup.enter.native="inventoryQuery">
          <el-select v-model="select" slot="prepend" placeholder="请选择" class="select-input">
            <el-option label="Item name" value="1"></el-option>
            <el-option label="GTIN" value="2"></el-option>
            <el-option label="SKU" value="3"></el-option>
            <el-option label="Item ID" value="4"></el-option>
            <el-option label="Brand" value="5"></el-option>
          </el-select>
          <el-button slot="append" icon="el-icon-search" @click="inventoryQuery"  v-hasPermi="['walmart:inventory:list']"></el-button>
        </el-input>
      </div>
      <div class="div-items">
        <el-table v-loading="loading" :data="inventoryList" style="width: 100%" height="500px">
          <el-table-column type="selection" align="center" fixed />
          <el-table-column label="Item name" align="center" prop="imgName" width="250" fixed>
            <template slot-scope="scope">
              <div class="item-container" style="display: flex; align-items: center;">
                <image-preview v-if="scope.row.imgName" :src="scope.row.imgName" :width="50" :height="50" />
                <i v-else class="no-image-icon">
                  <image-preview :src="scope.row.imageUrl" :width="50" :height="50" />
                </i>
                <el-popover placement="top" title="Item name" width="600" trigger="hover">
                  <template #reference>
                    <span class="product-name"
                      style="margin-left: 30px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: 150px;">
                      {{ scope.row.productName }}
                    </span>
                  </template>
                  <div>{{ scope.row.productName }}</div>
                </el-popover>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="sku" align="center" prop="sku" width="150px">
          </el-table-column>
          <el-table-column label="GTIN" align="center" prop="gtin" width="150px">
          </el-table-column>
          <el-table-column label="item id" align="center" prop="itemId" width="150px">
          </el-table-column>
          <el-table-column label="Status" align="center" width="100px">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.walmart_inventory_status" :value="scope.row.status" />
            </template>
          </el-table-column>
          <el-table-column label="Available to sell" prop="availToSellQty" width="150px" align="center">
          </el-table-column>
          <el-table-column label="Reservations" prop="onHandQty" align="center" width="150px">
          </el-table-column>
          <el-table-column label="Brand" width="100px"> </el-table-column>
          <el-table-column label="Action">
            <template slot-scope="scope">
              <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)">
                <el-button size="mini" type="text" icon="el-icon-more"></el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="handleInventoryLog" icon="el-icon-date" v-hasPermi="['walmart:inventoryLog:list']">查看库存日志</el-dropdown-item>
                  <el-dropdown-item command="handleInventoryPrint" icon="el-icon-printer" v-hasPermi="['walmart:inventory:gitn']">打印 GTIN 标签</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="margin-top: -11px; height: 55px">
        <pagination v-show="total > 0" :total="total" :page.sync="queryParam.pageNum" :limit.sync="queryParam.pageSize"
          @pagination="getInventory()" />
      </div>
    </div>
  </div>
</template>

<script>
import { getInventoryList } from "@/api/walmart/inventory";
import { getPlatFormTree } from "@/api/walmart/auth";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  name: 'Inventory',
  components: { Treeselect },
  dicts: ["walmart_inventory_status"],
  data() {
    return {
      input: "",
      select: "1",
      // 遮罩层
      loading: false,
      // 非多个禁用
      multiple: true,
      inventoryList: [],
      platFormOptions: [],
      queryParam: {
        pageNum: 1,
        pageSize: 10,
        authId: null,
        productName: null,
        gtin: null,
        sku: null,
        itemId: null,
        brand: null,
      },
      // 总条数
      total: 0,
    };
  },
  created() {
    this.getPlatForm();
  },
  methods: {
    /** 查询店铺名称列表 */
    getPlatForm() {
      getPlatFormTree().then((response) => {
        this.platFormOptions = response.data;
      });
    },
    handleNodeClick(data) {
      this.queryParam.authId = data[2];
      this.getInventory();
    },
    getInventory() {
      getInventoryList(this.queryParam).then((response) => {
        this.inventoryList = response.rows;
        this.total = response.total;
      });
    },
    inventoryQuery() {
      if (this.select == "1") {
        this.queryParam.productName = this.input;
        this.getInventory();
        this.queryParam.productName = null;
      } else if (this.select == "2") {
        this.queryParam.gtin = this.input;
        this.getInventory();
        this.queryParam.gtin = null;
      } else if (this.select == "3") {
        this.queryParam.sku = this.input;
        this.getInventory();
        this.queryParam.sku = null;
      } else if (this.select == "4") {
        this.queryParam.itemId = this.input;
        this.getInventory();
        this.queryParam.itemId = null;
      } else if (this.select == "5") {
        this.queryParam.brand = this.input;
        this.getInventory();
        this.queryParam.brand = null;
      }
    },

    // 更多操作触发
    handleCommand(command, row) {
      switch (command) {
        case "handleInventoryLog":
          this.handleInventoryLog(row);
          break;
          case "handleInventoryPrint":
          this.handleInventoryPrint(row);
          break;
      }
    },

    /** 查看库存日志 */
    handleInventoryLog(row) {
      localStorage.setItem("inventoryData", JSON.stringify(row));
      this.$router.push({ path: '/inventoryLog/view' });
    },
    /** 跳转到打印页面 */
    handleInventoryPrint(row) {
      sessionStorage.setItem('printData', JSON.stringify(row));
      this.$router.push("/print/printPage");
    },
  },
};
</script>

<style>
.app-margins {
  padding: 20px;
}

.sp-commodity {
  font-size: 36px;
  font-weight: bold;
  margin-top: 5px;
}

.input-with-selects .el-input-group__prepend {
  background-color: #fff;
}

.select-input {
  width: 160px;
}

.div-items {
  margin-top: 20px;
}

.flex-row,
.flex-row-reverse {
  -webkit-box-orient: horizontal !important;
}

.flex-row {
  -webkit-box-direction: normal !important;
  -ms-flex-direction: row !important;
  flex-direction: row !important;
}

.flex {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
}

.Card-module_medium__quHDO {
  padding: 16px;
}

.Card-module_card__zeE7r {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 2px 1px rgb(0 0 0 / 15%);
  box-sizing: border-box;
  width: 100%;
}

.pr-16 {
  padding-right: 16px !important;
}

.flex-1,
.flex-auto {
  -webkit-box-flex: 1 !important;
}

.flex-1 {
  -ms-flex: 1 1 0% !important;
  flex: 1 1 0% !important;
}

.flex-col,
.flex-col-reverse {
  -webkit-box-orient: vertical !important;
}

.flex-col {
  -webkit-box-direction: normal !important;
  -ms-flex-direction: column !important;
  flex-direction: column !important;
}

.flex {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
}

.gap-4 {
  grid-gap: 4px !important;
  gap: 4px !important;
}

.items-center {
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
}

.text-12 {
  font-size: 12px !important;
}

.Body-module_weight400__4Oy12 {
  font-weight: 400;
}

.Body-module_body1__B5yP7 {
  font-size: 16px;
  line-height: 24px;
}

.Body-module_body__eiCkB {
  color: #2e2f32;
  font-family: BogleWeb, MyriadPro, Helvetica Neue, Helvetica, Arial, sans-serif;
  margin-bottom: 0;
  margin-top: 0;
}

.items-center {
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
}

.vertical-line1 {
  border-left: 1px solid #e1dfdf;
  height: 60px;
  position: absolute;
  left: 400px;
  top: 83px;
}

.vertical-line2 {
  border-left: 1px solid #e1dfdf;
  height: 60px;
  position: absolute;
  left: 679px;
  top: 83px;
}

.vertical-line3 {
  border-left: 1px solid #e1dfdf;
  height: 60px;
  position: absolute;
  left: 956px;
  top: 83px;
}

.vertical-line4 {
  border-left: 1px solid #e1dfdf;
  height: 60px;
  position: absolute;
  left: 1234px;
  top: 83px;
}
</style>
